<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>博主首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/dynamicitem.js"></script>
    <script src="../js/reachbottom.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="../js/flyzoom.js"></script>
    <style>
        .icon {
            font-size: 24px;
            line-height: 40px;
            margin: 5px 0;
            color: #07C160;
            -webkit-transition: font-size 0.5s ease-out 0s;
            -moz-transition: font-size 0.5s ease-out 0s;
            transition: font-size 0.5s ease-out 0s;
        }

        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }

        .bloggerinfo {
            position: relative;
        }

        .bloggerimg {
            height: 150px;
            object-fit: cover;
            width: 100%;
        }

        .info {
            position: absolute;
            top: 135px;
            left: 0;
            right: 0;
        }

        .userimg {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }

        #t1 {
            position: relative;
            top: 158px;
        }

        .bottom {
            background-color: #F5F5F5;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            display: flex;
            padding: 10px 4px;
            z-index: 2;
        }
    </style>
</head>

<body ontouchstart>
    <div id="bloggerinfo">

    </div>
    <div class="weui-tab" id="t1" style="height:auto;">
        <div class="weui-navbar">
            <div class="weui-navbar__item">
                动态
            </div>
            <div class="weui-navbar__item">
                相册
            </div>
            <div class="weui-navbar__item">
                视频
            </div>
        </div>
        <div class="weui-tab__panel">
            <div id="s0" class="weui-tab__content">
                <div id="dynamiclist"></div>
                <div class="weui-loadmore" id="more0">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s1" class="weui-tab__content">
                <div class="weui-uploader__bd page-bd-15" style="margin: 0;">
                    <ul class="weui-uploader__files" id="attachlist1">
                    </ul>
                </div>
                <div class="weui-loadmore" id="more1">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
            <div id="s2" class="weui-tab__content">
                <div id="attachlist2" class="page-bd-15"></div>
                <div class="weui-loadmore" id="more2">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
            </div>
        </div>
    </div>
    <div id="videodiv"
        style="position:fixed;left:0;right:0;top:0;bottom:0;display: none;z-index:300;background-color: black;">
        <video width="100%" height="100%" id="videoele" webkit-playsinline='true' playsinline='true'></video>
        <div style="position:fixed;bottom:0;width:100%;z-index: 500;">
            <a href="javascript:void(0);" id="guanbi" class="weui-btn weui-btn_warn">关闭</a>
        </div>
    </div>
    <div style="visibility: hidden;" class="bottom">
        <div class="weui-cell" style="width: 100%;padding:0;">
            <div class="weui-cell__bd">
                <input maxlength="15" id="inputslogan" class="weui-input" placeholder="写下您的信条。。。" type="text">
            </div>
            <a href="javascript:void(0);" style="display: none;" class="weui-btn weui-btn_mini weui-btn_primary"
                id="saveslogan">确认</a>
        </div>
    </div>
</body>

</html>
<script id="bloggertemp" type="text/html">
    <div style="position:relative;width:100%;height:100%">
        <img class="bloggerimg" src="{{blogger.UserBackImg||'../images/bloggerback.png'}}" />
        {{if(blogger.UserId==userId)}} 
        <input class="weui-uploader__input" id="upload" accept="image/*" type="file">
        {{/if}}
    </div>
        <div  class="info page-bd-15">
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <img class="userimg" src="{{blogger.UserImg}}" />
                {{if(blogger.UserId!=userId)}}
                {{if(blogger.IsConcern==1)}}
                <label class="label f-white bg-green followicon">已关注</label>
                {{else}}
                <label class="label f-gray b-green followicon">关注</label>
                {{/if}}
                {{/if}}
            </div>
            <div class="weui-media-box__title">{{blogger.NickName}}</div>
            <div class="weui-media-box__title"><span class="slogan"> {{blogger.Slogan||'这家伙很懒，什么也没留下'}}  </span>
                {{if(blogger.UserId==userId)}}  <span  class="icon icon-115 eidtslogan"></span>{{/if}}</div>
            <div class="weui-media-box__desc">{{userInfo.Sex==1?'男':'女'}} | {{userInfo.Address}}</div>
            <div class="weui-media-box__title">{{blogger.LikesCount}}获赞 |
                <span id="toconcerns">{{blogger.ConcernedCount}}关注</span> | <span id="tofans">{{blogger.fansCount}}粉丝</span></div>
        </div>
</script>
<script id="attachtemp1" type="text/html">
    {{each list item}}
        <li class="weui-uploader__file" src="{{item.Url}}" style="background-image:url({{item.Url}})"></li> 
    {{/each}}
</script>
<script id="attachtemp2" type="text/html">
    {{each list item}}
    <div  data-item="{{item}}" class="bofang" style="position:relative;margin-bottom: 10px;">
        <img style="width:100%;height:300px;display:block;" src="{{item.Url}}?x-oss-process=video/snapshot,t_0,f_jpg"/>
        <div style="position:absolute;top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);width: 40px;
		height: 40px;">
            <image style="width: 40px;height: 40px;" src="../images/play2.png"></image>
        </div>
    </div>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            pagelist: [{
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 40,
                hasmore: true,
                isloading: false,
            }, {
                page: 1,
                limit: 10,
                hasmore: true,
                isloading: false,
            }],
            tabindex: 0,
            blogger: {},
            userInfo: {},
        },
        //初始化页面
        pageload: function () {
            jQuery.noConflict();
            var self = this;
            self.data.blogger.BloggerId = lobsterh5.GetUrlParam("bloggerId") || 0;
            self.initevent();
            self.getBloggerDetail();
        },
        getBloggerDetail() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetBloggerDetail", {
                bloggerId: self.data.blogger.BloggerId,
                userId: localStorage.getItem("userId")
            }).then(res => {
                self.data.blogger = res.blogger;
                self.getUserInfo();
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getUserInfo() {
            var self = this;
            lobsterh5.GET("/worker/v1/Patient/GetPatientCardByUserId", {
                mpUserId: self.data.blogger.UserId
            }).then(res => {
                self.data.userInfo = res.PatInfo;
                var appendhtml = template("bloggertemp", { userId: localStorage.getItem("userId"), blogger: self.data.blogger, userInfo: self.data.userInfo });
                $("#bloggerinfo").html(appendhtml);
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })

        },
        getBloggerDynamicList() {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetBloggerDynamicList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                userId: localStorage.getItem("userId"),
                bloggerId: self.data.blogger.BloggerId
            }).then(res => {
                $("#dynamiclist").lobsterdynamicitem({
                    list: res, userId: localStorage.getItem("userId"), btns: {
                        deletebtn: false,
                        reportbtn: false,
                        followbtn: false
                    }
                })
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        getBloggerAttachList(type) {
            var self = this;
            var tabindex = self.data.tabindex;
            if (!self.data.pagelist[tabindex].hasmore) return;
            $("#more" + tabindex).show();
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetBloggerAttachList", {
                page: self.data.pagelist[tabindex].page,
                limit: self.data.pagelist[tabindex].limit,
                bloggerId: self.data.blogger.BloggerId,
                type: type
            }).then(res => {
                if (type == 1) {
                    var html = template("attachtemp1", { list: res });
                    $("#attachlist1").append(html);
                    jQuery("#attachlist1").FlyZommImg({
                        rollSpeed: 100,//切换速度
                        miscellaneous: false,//是否显示底部辅助按钮
                        closeBtn: true,//是否打开右上角关闭按钮
                        hideClass: 'hideImg',//不需要显示预览的 class
                        imgQuality: 'original',//图片质量类型  thumb 缩略图  original 默认原图
                        slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM 
                            // 为了一开始居中显示
                            $('.fly-zoom-box-img').css('width', '100%').css('height', 'auto').css('top', 0).css('bottom', 0).css('margin', 'auto');
                        }
                    });
                } else {
                    var html = template("attachtemp2", { list: res });
                    $("#attachlist2").append(html);
                }
                if (res.length < self.data.pagelist[tabindex].limit) {
                    self.data.pagelist[tabindex].hasmore = false;
                    $("#more" + tabindex).text("没有更多了");
                } else {
                    $("#more" + tabindex).hide();
                    self.data.pagelist[tabindex].page++;
                }
                self.data.pagelist[tabindex].isloading = true;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        SaveBloggerBackImg(url) {
            var self = this;
            lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.SaveBloggerBackImg", {
                UserBackImg: url,
                BloggerId: self.data.blogger.BloggerId,
            }).then(res => {
                $(".bloggerimg").attr("src", url);
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        SaveBloggerSlogan(slogan) {
            var self = this;
            lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.SaveBloggerSlogan", {
                Slogan: slogan,
                BloggerId: self.data.blogger.BloggerId,
            }).then(res => {
                $(".slogan").text(slogan);
                $("#inputslogan").val("");
                $(".bottom").css("visibility", "hidden");
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $('#t1').tab({
                defaultIndex: self.data.tabindex,
                activeClass: 'tab-green',
                onToggle: function (index) {
                    self.data.tabindex = index;
                    if (!self.data.pagelist[index].isloading && index == 0)
                        self.getBloggerDynamicList();
                    else if (!self.data.pagelist[index].isloading && index == 1)
                        self.getBloggerAttachList(1);
                    else if (!self.data.pagelist[index].isloading && index == 2)
                        self.getBloggerAttachList(2);
                    console.log('index' + index);
                }
            })
            $("#bloggerinfo").on("click", ".followicon", function () {
                var bloggeritem = $(this);
                var txt = $(this).text();
                lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.FollowBlogger", {
                    BloggerId: self.data.blogger.BloggerId,
                    IsConcern: txt == "已关注" ? 0 : 1,
                    ConcernUserId: self.data.blogger.UserId,
                    UserId: localStorage.getItem("userId")
                }).then(res => {
                    $.toast(txt == "已关注" ? '取消成功' : '关注成功', 'text');
                    if (txt == "已关注") {
                        bloggeritem.removeClass("f-white").removeClass("bg-green").addClass("f-gray").addClass("b-green");
                        bloggeritem.text("关注");
                    }
                    else {
                        bloggeritem.addClass("f-white").addClass("bg-green").removeClass("f-gray").removeClass("b-green");
                        bloggeritem.text("已关注");
                    }
                }).catch(res => {
                    $.toast(res.msg || res, 'forbidden');
                })
            })
            $(window).scroll(function () {
                var scrollheight = $(".info").height() + $(".bloggerimg").height();
                console.log($(window).scrollTop());
                var windowtop = $(window).scrollTop();
                // if (windowtop > 0) {
                if ($(window).scrollTop() > scrollheight) {
                    $(".weui-navbar").css({ "position": "fixed", "top": 0, "width": "100%" });
                } else {
                    $(".weui-navbar").css({ "position": "absolute", "top": 0 });
                }
                // }
            });
            $("#attachlist2").on("click", ".bofang", function () {
                var item = $(this).data("item");
                console.log(item.Url);
                $("#videoele").attr("src", item.Url);
                $("#videodiv").show();
                var videoele = document.getElementById("videoele");
                if (videoele.paused)
                    videoele.play();
                else
                    videoele.pause();
            });
            $("#guanbi").click(function () {
                $("#videodiv").hide();
                var videoele = document.getElementById("videoele");
                if (videoele.paused)
                    videoele.play();
                else
                    videoele.pause();
            })
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    if (self.data.tabindex == 0)
                        self.getBloggerDynamicList();
                    else if (self.data.tabindex == 1)
                        self.getBloggerAttachList(1);
                    else if (self.data.tabindex == 2)
                        self.getBloggerAttachList(2);
                }
            })
            $("#bloggerinfo").on("click", "#tofans", function () {
                location.href = "fans.html?bloggerId=" + self.data.blogger.BloggerId + "&bloggerUserId=" + self.data.blogger.UserId + "&nickName=" + self.data.blogger.NickName;
            });
            $("#bloggerinfo").on("click", "#toconcerns", function () {
                location.href = "concerns.html?bloggerId=" + self.data.blogger.BloggerId + "&bloggerUserId=" + self.data.blogger.UserId + "&nickName=" + self.data.blogger.NickName;
            });
            $("#bloggerinfo").on("change", "#upload", function () {
                var files = event.target.files;
                // 如果没有选中文件，直接返回
                if (files.length === 0) {
                    return;
                }
                var formData = new FormData();
                formData.append("userfile", files[0]);
                $.ajax({
                    type: 'POST',
                    url: "https://devapi.mcloudsoft.cn/app/v1/oss/UploadLargeFile",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        var url = res.data.url;
                        self.SaveBloggerBackImg(url);
                    }, fail: function (res) {
                        $.toast(res.msg || res, "forbidden");
                    }
                })
            });
            $("#bloggerinfo").on("click", ".eidtslogan", function () {
                $(".bottom").css("visibility", "visible");
                $("#inputslogan").focus();
            })
            $("#inputslogan").keyup(function () {
                console.log($(this).val());
                if ($(this).val() != '')
                    $("#saveslogan").show();
                else
                    $("#saveslogan").hide();
            })
            $("#saveslogan").click(function () {
                var content = $("#inputslogan").val();
                if (!content) {
                    $.toast("内容不能为空", "text");
                    $("#evaluatetxt").focus();
                    return;
                }
                self.SaveBloggerSlogan(content);
            })
        },
    }); 
</script>